<template>
  <a-modal
    v-model:visible="modalVisible"
    @ok="handleOk"
    :mask-closable="false"
    @cancel="modalVisible = false"
  >
    <template #title> {{ props.title }}</template>
    <div>
      <a-form auto-label-width ref="formRefs" :model="form">
        <a-form-item field="number" label="类型名称：">
          <a-input v-model="form.name" placeholder="请输入类型名称..." />
        </a-form-item>
        <a-form-item field="number" label="是否启用：">
          <a-switch
            v-model="form.enable"
            :checked-value="1"
            :unchecked-value="2"
          />
        </a-form-item>
        <a-form-item field="number" label="备注：">
          <a-textarea
            placeholder="请输入备注..."
            allow-clear
            v-model="form.remark"
          />
        </a-form-item> </a-form
    ></div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import { reactive, computed, watchEffect, onMounted, ref, watch } from 'vue';

  const formRefs = ref();
  const props = withDefaults(
    defineProps<{
      visible: boolean;
      formData: any;
      title: string;
    }>(),
    {
      visible: false
    }
  );

  let form = ref({
    name: '',
    type: undefined,
    enable: 1,
    remark: ''
  });

  const emit = defineEmits(['update:visible', 'addTypeForm']);

  const handleOk = () => {
    if (props.title === '新增货架') {
      emit('addTypeForm', form.value, 'add');
    } else {
      emit('addTypeForm', form.value, 'edit');
    }
  };

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    }
  });

  watchEffect(() => {
    if (modalVisible.value) {
      // form.name = '';
      form.value = cloneDeep(props.formData);
    }
  });
</script>

<style scoped lang="less"></style>
